<template>
  <div>
    <div class="bg"></div>
    <div class="topList">
      <router-link to="/appmain" class="topBtn">
        <i class="iconfont arrow-left">&#xe641;</i>
        <span class="topTime">
          <i class="iconfont">&#xe637;</i>
           <downTime :endTime="endTime" :startTime="new Date().getTime()" :endMsg="endMsg" @func="getMsg"></downTime> 
        </span>
      </router-link>

      <span class="testView" @click="seeOption">
        试题总览
        <i class="iconfont viewAll">&#xe623;</i>
      </span>
    </div>
    <div class="contentList">
      <!-- 考题类型 -->
      <div class="examType">
        <p class="examTypeList">
          <span class="examItem">{{examtype}}</span>
          <span class="numList">( {{this.singlescore}}分 )</span>
        </p>
        <p class="examNum">{{this.order}}/{{this.totalnum}}</p>
      </div>
      <!-- 考试标题 -->
      <div class="examTitle">{{examTitle}}</div>
      <!-- 考试选项 -->
      <div class="examOptions">
        <el-radio-group v-model="radiojduge" v-show="isjduge">
          <el-radio :label="'正确'" style="display:block;padding: 5px;">正确</el-radio>
          <el-radio :label="'错误'" style="display:block;padding: 5px;">错误</el-radio>
        </el-radio-group>
        <el-radio-group v-model="radioselect" v-show="isselect">
          <el-radio :label="'A'" style="display:block;padding: 5px;">{{optionA}}</el-radio>
          <el-radio :label="'B'" style="display:block;padding: 5px;">{{optionB}}</el-radio>
          <el-radio :label="'C'" style="display:block;padding: 5px;">{{optionC}}</el-radio>
          <el-radio :label="'D'" style="display:block;padding: 5px;">{{optionD}}</el-radio>
        </el-radio-group>
        <el-checkbox-group v-model="checkList" v-show="ismany">
          <el-checkbox label="A" style="display:block;padding: 5px;">{{optionA}}</el-checkbox>
          <el-checkbox label="B" style="display:block;padding: 5px;">{{optionB}}</el-checkbox>
          <el-checkbox label="C" style="display:block;padding: 5px;">{{optionC}}</el-checkbox>
          <el-checkbox label="D" style="display:block;padding: 5px;">{{optionD}}</el-checkbox>
          
          <el-checkbox
            label="E"
            v-if="isE"
            style="display:block;padding: 5px;"
          >{{optionE}}</el-checkbox>
          <el-checkbox
            label="F"
            v-if="isF"
              style="display:block;padding: 5px;"
          >{{optionF}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>

    <div class="bottombar">
      <p class="lastQuestion" v-show="lastbutton" @click="last">上一题</p>
      <p class="nextQuestion" @click="next">{{nextqus}}</p>
    </div>

    <!-- 试题总览 -->
    <div class="testAllStatus" v-show="isTrue">
      <div class="testBg" @click="closeOption"></div>
      <div class="testOptionList">
        <div class="optionMask" v-if="jdugecount">
          <div class="optionType">判断题</div>
          <div class="optiondisplay" v-for="item in jdugelist" :key="item.ID">
            <span
              :class="item.St_answer==''?'options':'options selectOptions'"
              @click="jump(item.ques_order)"
            >{{item.ques_order}}</span>
          </div>
        </div>
        <div class="optionMask" v-if="selectcount">
          <div class="optionType">单选题</div>
          <div class="optiondisplay" v-for="item in selectlist" :key="item.ID">
            <span
              :class="item.St_answer==''?'options':'options selectOptions'"
              @click="jump(item.ques_order)"
            >{{item.ques_order}}</span>
          </div>
        </div>
        <div class="optionMask" v-if="manycount">
          <div class="optionType">多选题</div>
          <div class="optiondisplay" v-for="item in manylist" :key="item.ID">
            <span
              :class="item.St_answer==''?'options':'options selectOptions'"
              @click="jump(item.ques_order)"
            >{{item.ques_order}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Time from "@/components/app/downTime";
export default {
  data() {
    return {
      isTrue: false,
      checkList: [],
      isjduge: true,
      isselect: false,
      ismany: false,
      radiojduge: null,
      radioselect: null,
      st_answer: null,
      lastbutton: true,
      student: null,

      examTitle: null,
      examtype: null,
      singlescore: null,
      totalnum: null,
      order: 0,
      nextqus: "下一题",

      optionA: "",
      optionB: "",
      optionC: "",
      optionD: "",
      optionE: "",
      optionF: "",
      isC: true,
      isD: true,
      isE: true,
      isF: true,

      jdugelist: [],
      jdugecount: false,
      selectlist: [],
      selectcount: false,
      manylist: [],
      manycount: false,

       endTime: 0,
      endMsg: "考试结束",

      dtid:null,
       
    };
  },

  
components: {
    downTime: Time
  },
  created(){
    
     let start =new Date(localStorage.getItem("starttime"))//开始的时间
    let now =new Date()//当前时间
    let examtime=parseInt(localStorage.getItem("examtime"))
    if(now-start>0&& now-start<(examtime*1000*60)){
        this.endTime=new Date().getTime()+(examtime*60-(now-start)/1000)   
    } else{
      
    }
  },
  //初始化加载
  mounted: function() {
    this.init();
    this.loadinfo(this.student.St_id, this.examid, this.order); //加载题目
  },

  methods: {
     //倒计时结束
      getMsg(data) {
       if(data=="结束"){
         /*
         console.log("结束")
       this.student = JSON.parse(localStorage.getItem("studentinfo")); //取学生信息
         this.examid = localStorage.getItem("examid"); //取考试GUID
           let examinfo = JSON.parse(localStorage.getItem("examinfo"));
             this.totalnum =
        examinfo.jduge_num + examinfo.selection_num + examinfo.many_num;
         this.loadinfo(this.student.St_id, this.examid, this.totalnum+1) 
           this.radiojduge = null;
      this.radioselect = null;
      this.checkList = [];
      */
       }        
      },    
    //初始加载
    loadinfo(st_id, examid, order) {
      //取作答答案
      this.getanswer();
      this.$axios
        .get("/ExamStart/nextqus", {
          params: {
            st_id: st_id,
            examid: examid,
            order: order,
            answer: this.st_answer,
            dtid:this.dtid
          }
        })
        .then(res => {
          if (res.data == "OVER") {
            this.$router.replace({ path: "/examend" });
          } else {
            this.loadexamtitle(res.data); //加载题目
          }
        });
    },
    init() {
      this.student = JSON.parse(localStorage.getItem("studentinfo")); //取学生信息
      this.examid = localStorage.getItem("examid"); //取考试GUID
      this.dtid=localStorage.getItem("dt_id");
      this.order = parseInt(localStorage.getItem("order")); //取当前题序

      let examinfo = JSON.parse(localStorage.getItem("examinfo"));
      this.singlescore = examinfo.selection_score;
      this.totalnum =
        examinfo.jduge_num + examinfo.selection_num + examinfo.many_num;

      if (this.order == 1) {
        //如果是第一题,不显示上一题
        this.lastbutton = false;
      } else {
        this.lastbutton = true;
      }
      if (this.order == this.totalnum) {
        //如果是最后一题，显示交卷
        this.nextqus = "交卷";
      } else {
        this.nextqus = "下一题";
      }
    },
    //记录作答答案
    getanswer() {
      if (this.isjduge) {
        //如果是判断题
        this.st_answer = this.radiojduge;
      }
      if (this.isselect) {
        //如果是单选题
        this.st_answer = this.radioselect;
      }
      if (this.ismany) {
        //如果是判断题
        this.st_answer = this.checkList.toString();
      }
    },
    //查看试题总览
    seeOption() {
      this.$axios
        .get("/ExamStart/getexamlog", {
          params: { st_id: this.student.St_id, examid: this.examid }
        })
        .then(res => {
          this.jdugelist = JSON.parse(res.data.jduge); //加载题目总览
          this.selectlist = JSON.parse(res.data.select);
          this.manylist = JSON.parse(res.data.many);
          if (this.jdugelist.length > 0) {
            //如果有题目就变色
            this.jdugecount = true;
          }
          if (this.selectlist.length > 0) {
            this.selectcount = true;
          }
          if (this.manylist.length > 0) {
            this.manycount = true;
          }
        });
      this.isTrue = true; //跳出页面
    },
    //点击跳转
    jump(orderto) {
      this.getanswer();
      this.$axios
        .get("/ExamStart/jump", {
          params: {
            st_id: this.student.St_id,
            examid: this.examid,
            ordernow: this.order,
            orderto: orderto,
            answer: this.st_answer
          }
        })
        .then(res => {
          this.isTrue = false; //收起页面
          this.loadexamtitle(res.data); //加载题目
          localStorage.setItem("order", orderto);
          this.init();
          
        });
    },
    //关闭试题总览
    closeOption() {
      this.isTrue = false;
    },
    //上一题
    last() {
      this.getanswer();
      this.$axios
        .get("/ExamStart/passqus", {
          params: {
            st_id: this.student.St_id,
            examid: this.examid,
            order: this.order - 1,
            answer: this.st_answer
          }
        })
        .then(res => {
          this.loadexamtitle(res.data);
          localStorage.setItem("order", this.order - 1);
          this.init();
        });
    },
    //加载题目
    loadexamtitle(data) {

      this.examTitle = data.examtitle;
      this.examtype = data.examtype;
      this.optionA = data.optionA;
      this.optionB = data.optionB;
      this.optionC = data.optionC;
      this.optionD = data.optionD;
      this.optionE = data.optionE;
      this.optionF = data.optionF;

      if (data.examtype == "判断题") {
        this.isjduge = true;
        this.isselect = false;
        this.ismany = false;
        if (data.st_answer != "") {
          this.radiojduge = data.st_answer;
        } else {
          this.radiojduge = null;
        }
      }
      if (data.examtype == "单选题") {
        this.isjduge = false;
        this.isselect = true;
        this.ismany = false;
        if (data.st_answer != "") {
          this.radioselect = data.st_answer;
        } else {
          this.radioselect = null;
        }
      }
      if (data.examtype == "多选题") {
        this.isjduge = false;
        this.isselect = false;
        this.ismany = true;
        if (data.optionE == "") {
          this.isE= false;
        }else{
           this.isE= true;
        }
        if (data.optionF == "") {
         this.isF=false;
        }else{
           this.isF=true;
        }
        if (data.st_answer != "") {
          this.checkList = data.st_answer.split(",");
        } else {
          this.checkList = [];
        }
      }
    },
    //下一题
    next() {
      let st_id = this.student.St_id;
      let examid = this.examid;
      let order = this.order + 1;
      localStorage.setItem("order", order);
      this.loadinfo(st_id, examid, order);
      this.init();
      this.radiojduge = null;
      this.radioselect = null;
      this.checkList = [];
    }
  }
};
</script>

<style scoped>
.examOptions /deep/ .el-radio__label{
  width: 100% !important;
    display: inline-block !important;
    white-space: normal !important;
    vertical-align: top !important;
}
.examOptions /deep/ .el-checkbox__label{
  width: 100% !important;
    display: inline-block !important;
    white-space: normal !important;
    vertical-align: top !important;
}
.downTime-wrapper{
  display: inline-block;
}
.bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* background-image: linear-gradient( 135deg, #0396FF 10%, #ABDCFF 100%); */
  z-index: -1;
  width: 100%;
  /* height: 10rem; */
  background: #ececec;
}

.optiondisplay {
  display: inline;
  padding: 2px;
}

.isshow {
  display: none;
}

@font-face {
  font-family: "iconfont"; /* project id 1514769 */
  src: url("//at.alicdn.com/t/font_1514769_ds5xgd8k44.eot");
  src: url("//at.alicdn.com/t/font_1514769_ds5xgd8k44.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_1514769_ds5xgd8k44.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_1514769_ds5xgd8k44.woff") format("woff"),
    url("//at.alicdn.com/t/font_1514769_ds5xgd8k44.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_1514769_ds5xgd8k44.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 25px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: bottom;
}
.viewAll {
  font-size: 18px;
}
.testView {
  float: right;
  margin-right: 1rem;
  font-size: 16px;
  color: white;
}

.topTime {
  margin-right: -3rem;
}

.topList {
  height: 11rem;
  width: 100%;
  line-height: 2.5rem;
  /* border:1px solid red; */
  text-align: center;
  font-size: 18px;
  background-image: linear-gradient(135deg, #0396ff 10%, #abdcff 100%);
}
.topBtn {
  text-decoration: none;
  color: white;
  /* display: inline-block; */
  width: 67%;
  float: left;
}

.arrow-left {
  float: left;
}
.contentList {
  width: 90%;
  margin: -7rem auto;
  /* height: 25rem; */
  /* border:1px solid red; */
  border-radius: 10px;
  background: white;
  padding-bottom: 2rem;
  margin-bottom: 80px;
}
p {
  margin: 0;
  padding: 0;
}
.examType {
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  padding: 15px 10px;
}
.examTypeList {
  flex: 1;
}
.examNum {
  flex: 1;
  text-align: right;
  color: #1a9fff;
  font-size: 19px;
}
.examItem {
  color: #1a9fff;
  font-size: 17px;
  font-weight: 600;
}
.examTitle {
  padding: 10px;
  font-size: 16px;
  margin-bottom: 15px;
  /* border:1px solid red; */
}
.examOptions {
  font-size: 17px;
  color: #a0a0a0;
}
.fn {
  font-size: 22px;
}
.optionInfo {
  width: 80%;
  /* border:1px solid green; */
  display: inline-block;
  vertical-align: text-top;
}
.optionList {
  padding: 3px 10px;
}
.selectColor {
  color: dodgerblue;
}
.bottombar {
  position: fixed;
  z-index: 900;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid white;
  height: 50px;
  text-align: center;
  background: #0396ff;
  /* background-image: linear-gradient(135deg, #0396ff 10%, #abdcff 100%); */
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
  display: flex;
  line-height: 50px;
  color: white;
}
.lastQuestion,
.nextQuestion {
  flex: 1;
}

/* 试题总览 */
.testAllStatus {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 10000;
}
.testBg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* background-color: #d9d9d9; */
  background-color: darkgray;
  z-index: -10;
  opacity: 0.5;
}
.testOptionList {
  width: 80%;
  margin: 4rem auto;
  border-radius: 10px;
  background: white;
  padding: 10px 20px;
  font-size: 16px;
}
.options {
  display: inline-block;
  width: 30px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border: 1px solid;
  margin-bottom: 5px;
  color: #a0a0a0;
}
.optionMask {
  margin-bottom: 10px;
}
.optionType {
  margin-bottom: 5px;
}
.selectOptions {
  color: blue;
  border: 1px solid blue;
}
</style>
